<template>
	<view class="box">
		<view class="body" v-if="cart.length !== 0">

			<!-- 收货地址 -->
			<my-location class="location-box"></my-location>
			<!-- 商品列表 -->

			<view class="cart-title">
				<uni-icons type="shop"></uni-icons>
				<view>购物车</view>
			</view>
			<view class="cart-list">
				<uni-swipe-action>
					<block v-for="(goods,index) in cart" :key="index">
						<uni-swipe-action-item :right-options='options' @click="removeSwipe(goods)">
							<goods-item class="goods-item" @click="numChange" @radioChange="radioChange" :goods="goods"
								:showRadio="showRadio" :showNum="showNum"></goods-item>
						</uni-swipe-action-item>
					</block>
				</uni-swipe-action>
			</view>
			<!-- 结算区 -->
			<view class="settle">
				<my-settle> </my-settle>
			</view>
		</view>

		<view class="empty-cart" v-else>
			<image src="/static/cart_empty@2x.png" mode=""></image>
			<view>空空如也~</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from "vuex"
	export default {
		data() {
			return {
				showRadio: true,
				showNum: true,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#c00000'
					}
				}]
			}
		},
		onLoad() {
			console.log(this.$store)

		},
		onShow() {
			this.setBage();
		},
		computed: {
			...mapState('cart_m', ["cart"]),
			...mapGetters('cart_m', ['total'])
		},
		methods: {
			...mapMutations('cart_m', ["updateGoodsState", 'upnumChangeValue', "removeSwipeActive"]),
			// 
			radioChange(goods_id_state) {
				this.updateGoodsState(goods_id_state)
			},

			numChange(goods_id_count) {
				this.upnumChangeValue(goods_id_count)
				this.setBage()
			},
			setBage() {
				uni.setTabBarBadge({
					index: 2,
					text: this.total + ''
				})
			},
			// 点击删除
			removeSwipe(goods) {
				console.log(goods)
				this.removeSwipeActive(goods.goods_id)
				this.setBage()
			}
		},


	}
</script>

<style lang="scss">
	.box{
		.body {
		
				.cart-site {
					height: 200rpx;
				}
		
		
				.cart-title {
					display: flex;
		
					uni-icons {
						margin: 0 20rpx;
					}
				}
		
				.cart-list {
					padding-bottom: 50px;
		
				}
		
			}
			.empty-cart{
				text-align: center;
				margin-top: 400rpx;
				font-size: 30rpx;
				image{
					height: 150rpx;
					width: 150rpx;
				}
				
			}
	}
</style>
<!-- cart  购物车
商品信息
商品id	goods-id
商品名字  goods_name
商品价格   goods-price
商品的数量 goods_count  自己操作定义
商品的图片 goods_small_logo 
商品的勾选状态  goods_state 自己定义自己造  布尔值 true
	 
 -->
